import { defineComponent, computed } from 'vue'
import ConditionGroupItem from './ConditionGroupItem'
import { DeleteOutlined } from '@ant-design/icons-vue'
import './style/conditionGroupItem.less'

const ConditionGroupProps = {
  conditionData: {
    type: Object,
    default: () => {
      return {}
    }
  },
  parentData: {
    type: Object,
    default: () => {
      return {}
    }
  },
  selectedCondition: {
    type: Object,
    default: () => {
      return {}
    }
  }
}

const conditionGroup = {
  AND: '且',
  OR: '或'
}
export default defineComponent({
  name: 'ConditionGroupItem',
  props: ConditionGroupProps,
  slots: ['expressionSlot'],
  emits: ['selectCondition', 'deleteCondition'],
  setup(props, { emit, slots }) {
    // 是否展示逻辑运算符
    const showLogicalOperator = computed(() => {
      // 如果当前表达式的操作符与父级的表达式相同，则不显示当前表达式的运算符
      if (props.conditionData.operator === props.parentData.operator) {
        return false
      }

      // 如果表达式不存在子节点，或者子节点小于2个，则不显示操作符
      if (!props.conditionData.children || props.conditionData.children.length < 2) {
        return false
      }

      return true
    })

    function handleSelectCondition(conditionData, parentData) {
      emit('selectCondition', conditionData, parentData)
    }

    function handleDeleteCondition(conditionData, parentData) {
      emit('deleteCondition', conditionData, parentData)
    }
    // 处理条件格式插槽
    function handleDealExpressionSlots(slotsData) {
      return slots.expressionSlot && slots.expressionSlot(slotsData)
    }
    // 处理条件列表
    function handleDealList(item) {
      let reset
      if (item.children && item.children.length) {
        reset = (
          <ConditionGroupItem
            class="condition-group"
            conditionData={item}
            parentData={props.conditionData}
            selectedCondition={props.selectedCondition}
            onSelectCondition={(conditionData, parentData) => handleSelectCondition(conditionData, parentData)}
            onDeleteCondition={handleDeleteCondition}
            v-slots={{ expressionSlot: props => handleDealExpressionSlots(props) }}
          />
        )
      } else {
        reset = (
          <div>
            <div class="condition-item" onClick={() => handleSelectCondition(item, props.conditionData)}>
              {/**通过作用域插槽将当前节点的数据透传给使用组件的地方，使其自定义表达式的渲染方式**/}
              {handleDealExpressionSlots({
                expression: item.expression,
                node: item,
                parentNode: props.conditionData
              })}
              <div class="delete-icon-wrapper">
                {/**删除当前表达式节点的icon**/}
                {
                  <DeleteOutlined
                    onClick={e => {
                      e.stopPropagation()
                      handleDeleteCondition(item, props.conditionData)
                    }}
                  />
                }
              </div>
            </div>
            {/*选中表达式组时，展示新增条件的占位符*/}
            {props.selectedCondition === item && (
              <div class="condition-item">
                <div class="condition-placeholder" />
              </div>
            )}
          </div>
        )
      }
      return <div key={item.key}>{reset}</div>
    }
    return () => (
      <div class="condition-group-item-wrapper">
        <div class="condition-group-item">
          {showLogicalOperator.value && (
            <div class="logical-operator" onClick={() => handleSelectCondition(props.conditionData, props.parentData)}>
              {conditionGroup[props.conditionData.operator]}
            </div>
          )}
          {/*条件列表 */}
          <div class="condition-list">{props.conditionData.children.map(item => handleDealList(item))}</div>
        </div>
        {/*选中表达式组时，展示新增条件的占位符*/}
        {props.selectedCondition === props.conditionData && (
          <div class="condition-item">
            <div class="condition-placeholder" />
          </div>
        )}
      </div>
    )
  }
})
